<template>
  <div id="Login">
    <div class="box">
      <div class="formBox">
        <div class="leftbox">
          <div class="logo">
            <img src="../../assets/img/gsjLOGO.png"
                 alt="">
            <div>广东观视界</div>
          </div>
        </div>

        <div class="rightbox">
          <div class="title">数字旅游产业互联网平台</div>
          <!-- 登录表单 -->
          <el-form ref="loginForm">
            <el-form-item prop="username">
              <el-input placeholder="用户"
                        prefix-icon="el-icon-user">
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input placeholder="密码"
                        prefix-icon="el-icon-unlock"
                        show-password
                        @keyup.enter.native="login()">
              </el-input>
            </el-form-item>
            <div class="metpassword">
              <div class="remember-password">
                <input type="checkbox"><span>记住密码</span>
              </div>
              <span class="forget-password">忘记密码?</span>
            </div>

            <el-form-item>
              <el-button type="primary"
                         size="medium"
                         @click="submit">登 录</el-button>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </div>
    <div class="bottom">
      <!-- <div class="one">
        <img src="../../assets/img/2.png"
             alt="">
      </div> -->
      <div class="two">
        <img src="../../assets/img/1.png"
             alt="">
      </div>
    </div>
    <div class="word">
      <ul>
        <li>广东观视界网络科技有限公司</li>
        <li>沪ICP16035589号-3</li>
        <li>联系我们</li>
        <li>隐私声明</li>
        <li>法律条款</li>
      </ul>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      timeInterval: null,
      time: dayjs().format('HH:mm:ss'),
      // 快速选择用户
      dialogVisible: false,
      users: [
        {
          name: '管理员',
          username: 'admin',
          password: 'admin'
        },
        {
          name: '编辑',
          username: 'editor',
          password: 'editor'
        },
        {
          name: '用户1',
          username: 'user1',
          password: 'user1'
        }
      ],
      // 表单
      formLogin: {
        username: 'admin',
        password: 'admin',
        code: 'v9am'
      },
      // 校验
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.timeInterval = setInterval(() => {
      this.refreshTime()
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.timeInterval)
  },
  methods: {
    ...mapActions('d2admin/account', [
      'login'
    ]),
    refreshTime () {
      this.time = dayjs().format('HH:mm:ss')
    },
    /**
     * @description 接收选择一个用户快速登录的事件
     * @param {Object} user 用户信息
     */
    handleUserBtnClick (user) {
      this.formLogin.username = user.username
      this.formLogin.password = user.password
      this.submit()
    },
    /**
     * @description 提交表单
     */
    // 提交登录信息
    submit () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 登录
          // 注意 这里的演示没有传验证码
          // 具体需要传递的数据请自行修改代码
          this.login({
            username: this.formLogin.username,
            password: this.formLogin.password
          })
            .then(() => {
              // 重定向对象不存在则返回顶层路径
              this.$router.replace(this.$route.query.redirect || '/')
            })
        } else {
          // 登录表单校验失败
          this.$message.error('表单校验失败')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$text-back: #fff;
#Login {
  position: relative;
  height: 100%;
  width: 100%;
  // background: rgba(22, 137, 228, 0.8);
  background: $text-back;
}

.box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  z-index: 100;

  width: 760px;
  height: 345px;
  // text-align: center;
}
.formBox {
  // margin: 40px 60px;
  // padding: 20px 20px 1px;
  background: #ffffff;
  box-shadow: 0px 4px 15px 10px rgba(190, 190, 190, 0.17);
  border-radius: 16px;
  width: 100%;
  height: 100%;
  padding-top: 15px;
  .leftbox {
    width: 380px;
    height: 360px;
    position: relative;
    .logo {
      position: absolute;
      top: 25%;
      left: 25%;
      text-align: center;
      font-size: 18px;
      color: #606266;
      font-family: SimHei;
      img {
        width: 150px;
        height: 100px;
      }
    }
  }
  .rightbox {
    width: 380px;
    margin-left: 363px;
    margin-top: -325px;
    border-left: 1px solid #e4e7ed;
    padding-left: 49px;
    .metpassword {
      width: 280px;
      font-size: 14px;
      color: #303133;
      margin-bottom: 21px;
      .remember-password {
        display: inline-block;
        position: relative;
        input {
          position: absolute;
          top: 1px;
        }
        span {
          margin-left: 18px;
        }
      }
      .forget-password {
        float: right;
        color: #409eff;
        cursor: pointer;
      }
    }
  }
  .title {
    width: 198px;
    height: 25px;
    font-size: 18px;
    font-family: Helvetica;
    color: #606266;
    line-height: 22px;
  }
}
.bottom {
  position: absolute;
  bottom: 0%;
  width: 100%;
  .one {
    bottom: 0%;
    position: absolute;
    img {
      width: 100%;
      height: 20%;
    }
  }
  .two {
    img {
      width: 100%;
      height: 20%;
    }
  }
  // .two {
  //   width: 100%;
  //   height: 30%;
  //   background: linear-gradient(
  //       273deg,
  //       #8cf6dc 0%,
  //       rgba(127, 249, 238, 0.63) 100%
  //     ),
  //     radial-gradient(transparent 50px, black 51px, transparent 52px);
  //   position: absolute;
  //   bottom: 0%;
  // }
}
.word {
  position: absolute;
  bottom: 10%;
  left: 36%;
  color: black;

  ul {
    width: 588px;
    font-size: 14px;
    li {
      float: left;
      list-style: none;
      margin-left: 5px;
      padding-right: 5px;
      border-right: 1px solid white;
      cursor: pointer;
    }
  }
}

.el-form {
  margin-top: 21px;
}

.el-form-item {
  /deep/ .el-input__inner:focus {
    border-color: #dcdfe6;
  }
}
.el-input {
  width: 280px;
}
.el-button {
  width: 280px;
}
</style>
